<template>
    <view class="page savepadding">
        <view class="filter-wrap">
            <view class="filter-item" @click="showModel=true">
                <view>{{nowModel.dictValue||'车型'}}</view>
                <u-icon name="arrow-down"></u-icon>
            </view>
            <view class="filter-item" @click="showBrand=true">
                <view>{{nowBrand.carBrandName||'品牌'}}</view>
                <u-icon name="arrow-down"></u-icon>
            </view>
        </view>
        <view class="savepadding">
            <template v-if="list.length">
                <DirveCard v-for="(item, index) in list" :itemData="item" :key="index" @itemClick="itemClick(item)"></DirveCard>
                <u-loadmore :status="loading" @loadmore="loadmore"></u-loadmore>
            </template>
            <u-empty mode="list" marginTop="100" v-else />
        </view>
        <!-- 车型选择器 -->
        <u-picker title="请选择款型" keyName="dictValue" :show="showModel" :columns="modelList" @cancel="showModel=false" @confirm="modelConfirm"></u-picker>
        <!-- 品牌选择器 -->
        <u-picker title="请选择品牌" keyName="carBrandName" :show="showBrand" :columns="brandList" @cancel="showBrand=false" @confirm="brandConfirm"></u-picker>
        <!-- 登录弹窗 -->
        <LoginMask></LoginMask>
    </view>
</template>

<script>
import DirveCard from '@/components/card/dirve-card.vue';
import * as HomeApi from '@/common/apis/home-api';
import LoginMask from '@/components/layout/login-mask.vue';

export default {
    components: {
        DirveCard,
        LoginMask,
    },
    data() {
        return {
            list: [], // 车辆列表
            pageNo: 1, // 页码
            bizType: 1, // 1.热门租车 2.以租代购 3.长租 4.金融分期 5.直购 6.试驾 7.选车
            schemeType: 0, // bizType为5，6必传 1.直购； bizType为2必传 2分期购车；bizType为3 必传3租赁； bizType为4必传 4.金融分期 还有一种情况是选择租赁方式传递
            showModel: false, // 显示车型选择器
            showBrand: false, // 显示品牌选择器
            modelList: [], // 车型列表
            brandList: [], // 品牌列表
            nowModel: {}, // 当前选择车型
            nowBrand: {}, // 当前选择品牌
            loading: 'loadmore',
        };
    },
    computed: {
        homeData() {
            return this.$store.state.home.homeData;
        },
        openid() {
            return this.$store.state.user.openid;
        },
        deptId() {
            return this.$store.state.user.deptId;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
    },
    async onLoad(op = {}) {
        // 动态设置当前页面的标题。
        if (op.title) {
            uni.setNavigationBarTitle({ title: op.title }); //'新的标题'
        }
        this.bizType = op.bizType;
        this.schemeType = op.schemeType;
        this.list = await this.getList(); // 获取车辆列表
        await this.getConditionData(); // 获取车型,品牌
    },
    methods: {
        /**
         * 获取车型,品牌
         */
        async getConditionData() {
            try {
                const result = await HomeApi.conditionnew();
                this.modelList = [[{ dictValue: '车型不限' }].concat(result.carModelTypeList)]; // 车型列表
                this.brandList = [[{ carBrandName: '品牌不限' }].concat(result.carBrandList)]; // 品牌列表
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 获取车辆列表
         */
        async getList() {
            const params = {
                pageNo: this.pageNo,
                bizType: this.bizType,
                deptId: this.deptId,
            };
            if (this.schemeType) {
                params.schemeType = this.schemeType; // bizType为5，6必传 1.直购； bizType为2必传 2分期购车；bizType为3 必传3租赁； bizType为4必传 4.金融分期 还有一种情况是选择租赁方式传递
            }
            if (this.nowModel.dictCode) {
                params.modelTypeSearchValue = this.nowModel.dictCode; // 车型id
            }
            if (this.nowBrand.carBrandId) {
                params.brandId = this.nowBrand.carBrandId; // 品牌id
            }
            try {
                const result = await HomeApi.scheme(params);
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
                return [];
            }
        },
        /**
         * 选择车型
         */
        async modelConfirm({ value }) {
            this.showModel = false;
            this.nowModel = value[0];
            this.list = await this.reload(); // 重新获取列表
        },
        /**
         * 选择品牌
         */
        async brandConfirm({ value }) {
            this.showBrand = false;
            this.nowBrand = value[0];
            this.list = await this.reload(); // 重新获取列表
        },
        /**
         * 查看车辆详情
         */
        itemClick(item) {
            uni.navigateTo({
                url: '/pages/car/cardetail/cardetail?bizType=' + this.bizType + "&schemeId=" + item.schemeId,
            });
        },
        async reload() {
            this.pageNo = 1;
            this.list = await this.getList(); // 获取列表
            this.loading = 'loadmore';
        },
        /**
         * 加载更多
         */
        async loadmore() {
            this.loading = 'loading';
            this.pageNo++;
            const list = await this.getList();
            if (list.length) {
                this.list = this.list.concat(list);
                this.loading = 'loadmore';
            } else {
                this.loading = 'nomore';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.page {
    background: #f5f5f5;
    padding: $page_padding;

    .filter-wrap {
        margin: 30upx 0;
        display: flex;
        justify-content: flex-start;
    }

    .filter-item {
        display: flex;
        margin-right: 82upx;
        view {
            margin-right: 9upx;
            font-weight: bold;
            font-size: 26upx;
            color: #333;
        }
    }
}
</style>